<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="/css/pintuer.css">
        <link rel="stylesheet" href="/css/admin.css">
        <script src="/js/jquery.js"></script>
        <script src="/js/pintuer.js"></script>
        <script src="/js/vue.js"></script>
        <script src="/js/axios.min.js"></script>
        <style>
            #page {
                list-style: none;
                margin-top: -25px;

            }

            .pagebutton {
                float: left;
                margin-right: 1px;
                padding: 4px;
            }
            .title{
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <form method="post" action="" id="listform">
            <div class="panel admin-panel">
                <div class="panel-head">
                    <strong class="icon-reorder"> 商品列表</strong>
                </div>
                <div class="padding border-bottom">
                    <ul class="search" style="padding-left:10px;">
                        <li><a class="button border-main icon-plus-square-o" href="/backStage/add"> 添加商品</a></li>
                        <if condition="$iscid eq 1">
                            <li>
                                <select name="cid" class="input" @change="findItemByPage" style="width:200px; line-height:17px;"
                                        id="categoryId">
                                    <option selected="selected" value="">全部商品</option>
                                    <option v-for="category in categoryList" :value="category.categoryId" >
                                        {{category.categoryName}}
                                    </option>
                                </select>
                            </li>
                        </if>
                        <li>
                            <input type="text" placeholder="请输入搜索关键字" name="keywords" class="input"
                                v-model="search"   style="width:250px; line-height:17px;display:inline-block"/>
                            <a href="javascript:void(0)" class="button border-main icon-search"
                               v-on:click="findItemByPage"> 搜索</a>
                        </li>
                    </ul>
                </div>
                <table class="table table-hover text-center" style=" table-layout: fixed">
                    <tr>
                        <th width="7%" style="text-align:left; padding-left:20px;">商品编号</th>
                        <th width="7%">图片</th>
                        <th width="20%">商品标题</th>
                        <th width="13%">商品卖点</th>
                        <th width="6%">商品价格</th>
                        <th width="6%">商品库存</th>
                        <th width="6%">商品状态</th>
                        <th width="6%">热门商品</th>
                        <th width="4%">新品</th>
                        <th width="9%">创建时间</th>
                        <th width="9%">更改时间</th>
                        <th width="9%">操作</th>
                    </tr>
                    <tr v-for="item in itemList">
                        <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value=""/>
                            {{item.itemId}}
                        </td>
                        <td width="5%"><img v-bind:src="item.itemImage" alt="" width="70" height="50"/></td>
                        <td class="title">{{item.itemTitle}}</td>
                        <td class="title">{{item.itemSellPoint}}</td>
                        <td>{{item.itemPrice}}</td>
                        <td>{{item.itemInventory}}</td>
                        <td>{{item.itemStatus==1?"上架":"下架"}}</td>
                        <td>{{item.hotItem==1?"是":"不是"}}</td>
                        <td>{{item.newItem==1?"是":"不是"}}</td>
                        <td>{{item.creationTime}}</td>
                        <td>{{item.updateTime}}</td>
                        <td>
                            <div class="button-group" style="width: 90px">
                                <a class="button border-main" v-bind:href="'/backStage/edit?id='+item.itemId" >
                                    <span class="icon-edit"></span>
                                    修改
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
                            全选
                        </td>
                        <td colspan="7" style="text-align:left;padding-left:20px;">
                            <a href="javascript:void(0)" class="button border-red icon-trash-o"
                               style="padding:5px 15px;"
                               onclick="DelSelect()"> 删除
                            </a>
                            <a href="javascript:void(0)" style="padding:5px 15px; margin:0 10px;"
                               class="button border-blue icon-edit"
                               onclick="sorts()"> 排序</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="8">
                            <div class="pagelist" style="margin-left: 50%">
                                <ul id = "page">
                                    <li class="pagebutton"><button  type="button" class="btn btn-default" v-on:click="startPage">首页</button></li>
                                    <li class="pagebutton"><button  type="button" class="btn btn-default" v-on:click="up">上一页</button></li>
                                    <li class="pagebutton"><input  style="width: 30px " class="btn btn-default" id="ye" v-model="page" @keyup.enter="onSubmit"/></li>
                                    <li class="pagebutton"><button  type="button" class="btn btn-default" v-on:click="down">下一页</button></li>
                                    <li class="pagebutton"><button  type="button" class="btn btn-default" v-on:click="endPage">尾页</button></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <script type="text/javascript">
            var vue = new Vue({
                el: "#listform",
                data: {
                    page:1,
                    itemList: [],
                    categoryList:[],
                    total:0,
                    rows:10,
                    search:""
                },
                methods: {
                    findItemByPage: function () {
                        debugger;
                        let categoryId = $("#categoryId").find("option:selected").val();
                        let url = "/item/findItemByPage?page="+this.page+"&rows="+this.rows+"&categoryId="+categoryId+"&msg="+this.search;
                        axios.get(url)
                            .then(function (result) {
                                debugger;
                                if (result.data.total==0){
                                    alert("没有找到相关商品信息")
                                    this.findItemByPage();
                                }
                                this.vue.itemList = result.data.rows;
                                this.vue.total = result.data.total;
                            })
                            .catch();
                    },
                    startPage:function(){
                        this.page = 1;
                        this.findItemByPage();
                    },
                    up: function () {
                        if (eval(this.page) <= 1) {
                            alert("当前已经是第一页!");
                            return false;
                        } else {
                            this.page = eval(this.page) - 1;
                            this.findItemByPage();
                        }
                    },
                    onSubmit: function(){
                        this.page = eval($("#ye").val());
                        this.findItemByPage();
                    },
                    down: function () {
                        let page = eval(this.total)/this.rows;
                        if (eval(this.page) >= page) {
                            alert("当前已经是最后一页!");
                            return false;
                        } else {
                            this.page = eval(this.page) + 1;
                            this.findItemByPage();
                        }
                    },
                    endPage:function(){
                        this.page = parseInt((this.total-1)/this.rows)+1;
                        this.findItemByPage();
                    },
                    findCategory:function () {
                        let url = "/category/findCategory";
                        axios.get(url)
                            .then(function (result) {
                                this.vue.categoryList = result.data;
                            })
                            .catch();
                    }
                },
                mounted: function () {
                    this.findItemByPage();
                    this.findCategory();
                }
            })

            //全选
            $("#checkall").click(function () {
                $("input[name='id[]']").each(function () {
                    if (this.checked) {
                        this.checked = false;
                    } else {
                        this.checked = true;
                    }
                });
            })

            //批量删除
            function DelSelect() {
                var Checkbox = false;
                $("input[name='id[]']").each(function () {
                    if (this.checked == true) {
                        Checkbox = true;
                    }
                });
                if (Checkbox) {
                    var t = confirm("您确认要删除选中的内容吗？");
                    if (t == false) return false;
                    $("#listform").submit();
                } else {
                    alert("请选择您要删除的内容!");
                    return false;
                }
            }
        </script>
    </body>
</html>